Compare box-sizing: content-box and border-box.
Comparing content-box and border-box in CSS
box-sizing determines how the width and height of an element are calculated. With content-box (the default), the width and height include only the content; padding and border are added outside, increasing total element size. With border-box, the width and height include content, padding, and border, keeping the total size fixed.
Example Comparison
Key Differences
content-box: width/height includes only content; padding and border increase total size.
border-box: width/height includes content, padding, and border; total size remains as specified.
border-box simplifies layout calculations and prevents unexpected overflow.
content-box is the default, but many developers prefer border-box for predictable sizing.